<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
    <script src="./vue-router.js"></script>
    <script>
        window.onload=function(){
            //1.定义组件
            var student={
                template:`
                    <div>
                        <h2>student-list--</h2>
                    </div>
                `
            }
            var teacher={
                created(){
                    console.log(this.$route.query)
                },
                template:`
                    <div>
                        <h2>teacher-list--</h2>
                    </div>
                `
            }
            var user={
                created(){
                    console.log(this.$route.params)
                },
                watch:{
                    '$route':function(){
                        alert(this.$route.params.id);
                    }
                },
                template:`
                    <div>
                        <h2>user-list--</h2>
                    </div>
                `
            }
            //2.定义路由
            var router=new VueRouter({
                routes:[{
                    path:'/',
                    redirect:'/student'
                },{
                    path:'/student',
                    alias:'/s',
                    component:student
                },{
                    path:'/teacher',
                    component:teacher
                },{
                    path:'/user:id',
                    name:'user-a',
                    component:user
                }]
            })
            //3.挂载路由到实例对象中
            new Vue({
                el:'#app',
                data:{
                    student:'/s'
                },
                router
            })
        }
    </script>
</head>
<body>
    <div id='app'>
        <h1>vue-router页面</h1>
        <router-link :to='student'>跳转到student页面</router-link>
        <router-link :to='{path:"/teacher",query:{id:9}}'>跳转到teacher页面</router-link>
        <router-link :to='{name:"user-a",params:{id:10}}'>跳转到user页面-10</router-link>
        <router-link :to='{name:"user-a",params:{id:11}}'>跳转到user页面-11</router-link>
        <div>
            <router-view></router-view>
        </div>
    </div>
</body>
</html>